<script setup>
import { ref } from 'vue'
import { getCurrentMemberService } from '@/api/member.js'
import { getProjectTop10Service } from '@/api/project.js'
import { useRouter } from 'vue-router'
import ProjectBarChart from './components/ProjectBarChart.vue'
import BalanceRecharge from '../../components/BalanceRecharge.vue'

const router = useRouter()

// 下拉刷新
const refreshLoading = ref(false)

const memberInfo = ref({
  name: null, // 姓名
  balance: null, // 余额
  points: null, // 积分
  avatarUrl: null // 头像链接
})
const top10Project = ref()

// 获取会员信息、热门服务
const getDisplayInfo = async () => {
  const memberRes = await getCurrentMemberService()
  memberInfo.value = memberRes.data.data
  const projectRes = await getProjectTop10Service()
  top10Project.value = projectRes.data.data
  refreshLoading.value = false
}
getDisplayInfo()

// 余额充值
const balanceRechargeRef = ref()
const handleBalanceRecharge = (memberInfo) => {
  balanceRechargeRef.value.open(memberInfo)
}
</script>

<template>
  <div class="home">
    <van-nav-bar title="首页" fixed />
    <van-pull-refresh v-model="refreshLoading" @refresh="getDisplayInfo" success-text="加载成功">
      <!-- 用户卡片 -->
      <div class="user-card">
        <div class="user-info" @click="router.push('/user')">
          <van-image round width="50" height="50" :src="memberInfo.avatarUrl" />
          <div class="user-details">
            <div class="greeting">Hi，{{ memberInfo.name }}！</div>
            <div class="amount">余额: {{ (memberInfo.balance / 100).toFixed(2) }}</div>
            <div class="amount">积分: {{ memberInfo.points }}</div>
          </div>
        </div>
        <van-button type="primary" size="small" round icon="plus" @click="router.push('/user/car')">
          车辆
        </van-button>
      </div>

      <!-- 菜单 -->
      <van-grid :column-num="3" :border="false" class="menu-grid">
        <van-grid-item icon="service-o" text="服务预约" @click="router.push('/project')" />
        <van-grid-item
          icon="orders-o"
          text="业务中心"
          @click="router.push('/user/business?businessStatus=待接单')"
        />
        <van-grid-item icon="gift-o" text="充值有礼" @click="handleBalanceRecharge(memberInfo)" />
      </van-grid>

      <!-- 热门服务 -->
      <div class="service-section">
        <div class="section-title">
          <span>热销服务排行榜</span>
        </div>
        <project-bar-chart></project-bar-chart>
      </div>
    </van-pull-refresh>
  </div>
  <!-- 余额充值弹出层 -->
  <balance-recharge ref="balanceRechargeRef" @success="getDisplayInfo"></balance-recharge>
</template>

<style lang="scss" scoped>
.home {
  padding-top: 46px;
  padding-bottom: 50px;
  background-color: #f7f8fa;
  min-height: 100vh;

  .user-card {
    margin: 12px;
    padding: 16px;
    background: #fff;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .user-info {
      display: flex;
      align-items: center;
      gap: 12px;

      .user-details {
        .greeting {
          font-size: 16px;
          font-weight: 500;
          color: #323233;
          margin-bottom: 4px;
        }

        .amount {
          font-size: 12px;
          color: #969799;
        }
      }
    }
  }

  .menu-grid {
    margin: 12px 0;
    background: #fff;
    border-radius: 8px;
  }

  .service-section {
    margin: 12px;
    background: #fff;
    border-radius: 8px;
    padding: 16px;

    .section-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;

      span {
        font-size: 16px;
        font-weight: 500;
        color: #323233;
      }
    }
  }
}
</style>
